<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        main {
            width: 100%;
            height: 100%;
            background: url('image/bg.png') center center no-repeat;
        }

        .relative {
            position: relative;
        }

        .absolute {
            position: absolute;
        }

        .login {
            right: 10%;
            top: 50%;
            width: 478px;
            /*height: 478px;*/
            background-color: rgba(255, 255, 255, .5);
            box-shadow: 3px 3px 10px rbga(0, 0, 0, .8);
            transform: translate(0, -39%);
            -webkit-transform: translate(0, -39%);
            -moz-transform: translate(0, -39%);
            -ms-transform: translate(0, -39%);
        }

        .login .title {
            color: white;
            line-height: 110px;
            font-size: 22px;
        }

        .login .input {
            color: #2a2a2a;
            line-height: 40px;
            font-size: 18px;
            margin-bottom: 20px;
        }

        .login .input label {
            left: 5%;
            color: #2a2a2a;
            font-weight: 500;
        }

        .login .input input {
            text-indent: 2.5em;
            height: 40px;
            line-height: 40px;
            border: 0;
            border-radius: 5px;
            outline: none;
            border: 1px solid #fff;
        }
        .login .input .name{
            text-indent: 3em;
        }

        .login .input.code input {
            text-indent: 6.5em;
        }

        .login .input .select {
            left: 24%;
            width: 69%;
            border: 0;
            height: 95%;
            margin-top: 1px;
            outline: none;
        }

        .login .falut {
            color: #850c10;
            line-height: 20px;
        }

        .login .btn {
            /*margin-top: 35px;*/
            color: white;
            line-height: 56px;
            font-size: 24px;
        }

        .login .btn button {
            /*margin-top: 35px;*/
            margin-bottom: 29px;
            background-color: #850c10;
            line-height: 56px;
            font-size: 24px;
            border: 0;
            border-radius: 5px;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.js"></script>
    <!-- <script src="js/index.js"></script> -->
</head>

<body>
    <main class="relative">
        <div class="login absolute container">
            <div class="title col-lg-12">用户注册</div>
            <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 name">
                <label class="absolute">用户名:</label>
            </div>
            <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 account">
                <label class="absolute">账号:</label>
            </div>
            <div class="input col-lg-12 relative">
                <input type="password" class="col-lg-12 password">
                <label class="absolute">密码:</label>
            </div>
            <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 hy" readonly="readonly">
                <label class="absolute">初审权限:</label>
                <select class="absolute select trial_first">
                    <option value="1">是</option>
                    <option value="0" selected>否</option>
                </select>
            </div>
            <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 hy" readonly="readonly">
                <label class="absolute">审查权限:</label>
                <select class="absolute select trial_second">
                    <option value="1">是</option>
                    <option value="0" selected>否</option>
                </select>
            </div>
            <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 hy" readonly="readonly">
                <label class="absolute">审核权限:</label>
                <select class="absolute select trial_third">
                    <option value="1">是</option>
                    <option value="0" selected>否</option>
                </select>
            </div>
             <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 hy" readonly="readonly">
                <label class="absolute">审批权限:</label>
                <select class="absolute select trial_forth">
                    <option value="1">是</option>
                    <option value="0" selected>否</option>
                </select>
            </div> 
            <div class="input col-lg-12 relative code">
                <input type="text" class="col-lg-12">
                <label class="absolute">行政区划代码:</label>
            </div>
            <div class="input col-lg-12 relative">
                <input type="text" class="col-lg-12 hy" readonly="readonly">
                <label class="absolute">行业:</label>
                <select class="absolute select industry">
                    <option value="" selected>-请选择-</option>
                </select>
            </div>
            <div class="col-lg-12 relative">
                <label class="falut">所有选项均不为空！</label>
            </div>
            <div class="btn col-lg-12 relative">
                <button class="col-lg-12 register">注册</button>
            </div>
        </div>
    </main>
    <script>
        $('.code input').on('blur', function () {
            var code = $('.code input').val();
            if (code != '') {
                if (code.length == 6) {
                    //判断所属行业
                    if (code == '330000') {
                        $('.select.industry').empty().append('<option value="">-请选择-</option><option value="交通运输厅">交通运输厅</option><option value="公路局">公路局</option><option value="港航局">港航局</option><option value="港航局">港航局</option><option value="机场局">机场局</option>');
                    } else {
                        $('.select.industry').empty().append('<option value="">-请选择-</option><option value="交通运输局">交通运输局</option><option value="公路局">公路局</option><option value="港务管理局">港务管理局</option><option value="港航管理局">港航管理局</option><option value="运管局">运管局</option>')
                    }
                } else {
                    $('.code input').css('border', '1px solid #850c10');
                    $('.falut').html('请输入正确的行政区划代码');
                    $(this).focus();
                }
            } else {
                $('.code input').css('border', '1px solid #850c10');
                $('.falut').html('请输入正确的行政区划代码');
                $(this).focus();
            }
        })
        $('.register').on('click', function () {
            var reg = {};
            var name = $('.name').val();
            var account = $('.account').val();
            var password = $('.password').val();
            var code = $('.code input').val();
            var trial_first = $('.trial_first option:selected').val();
            var trial_second = $('.trial_second option:selected').val();
            var trial_third = $('.trial_third option:selected').val();
            var trial_forth = $('.trial_forth option:selected').val();
            var industry = $('.industry option:selected').val();
            if (name == '' || account == '' || password == '' || code == '' || industry == '' || trial_first == '' || trial_second == '' || trial_third == '' || trial_forth == '') {
                $('.account,.password,.code input,.hy').css('border', '1px solid #850c10');
                $('.falut').html('所有选项均不为空！');
            } else if (account != '' && password != '' && code != '' && industry != '' && trial_first != '' && trial_second != '' && trial_third != '' && trial_forth != '') {
                var Guid = guid();
                reg.name = name;
                reg.user_name = account;
                reg.user_pwd = password;
                reg.user_id = Guid;
                reg.trial_first = trial_first;
                reg.trial_second = trial_second;
                reg.trial_third = trial_third;
                reg.trial_forth = trial_forth;
                reg.division_code = code;
                reg.career = industry;
                reg = JSON.stringify(reg);
                $.post('/api/user_register', reg, function (res) {
                    window.location.href = 'login.html';
                });
            }
        })

        function guid() {
            function S4() {
                return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
            }
            return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
        }
    </script>
</body>

</html>